<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./期末考试.css">
</head>
<body>
    <div class="box">
        <ul class="lunbo">
            <li><img src="./1.jpg" alt=""></li>
            <li><img src="./2.jpg" alt=""></li>
            <li><img src="./3.jpg" alt=""></li>
            <li><img src="./4.jpg" alt=""></li>
            <li><img src="./5.jpg" alt=""></li>
        </ul>
        <span class="l"><</span>
        <span class="r">></span>
        <ol>
            <li index="0">1</li>
            <li index="1">2</li>
            <li index="2">3</li>
            <li index="3">4</li>
            <li index="4">5</li>
        </ol>
        
    </div>    
    
</body>
</html>
<script>
    var bth_r=document.querySelector('.r');
    var bth_l=document.querySelector('.l');
    var box=document.querySelector('.box');
    var lunbo=document.querySelector('.lunbo');
    box.onmouseenter=function(){
        bth_l.style.display='block';
        bth_r.style.display='block';
        clearInterval(time)
    }
    box.onmouseleave=function(){
        bth_l.style.display='none';
        bth_r.style.display='none'
    }
    var num=0;
    bth_r.onclick=function(){
        num++;
        if(num==5){
            num=0;
        }
        lunbo.style.left=(-600*num)+'px';
        change(num);
    }
    bth_l.onclick=function(){
        num--;
        if(num<0){
            num=4;
        }
        lunbo.style.left=(-600*num)+'px';
        change(num);
    }
    var time;
    function enlunbo(){
        time=setInterval(function(){
            bth_r.onclick();
        },2000)
    }
    enlunbo();
    var s_li=document.querySelectorAll('.box ol li');
    for(var i=0;i<s_li.length;i++){
        s_li[i].onclick=function(){
            for(var i=0;i<s_li.length;i++){
                s_li[i].style.backgroundColor='#fff';
            }
            this.style.backgroundColor='red';
            var index=document.querySelector('index');
            num=index;
            lunbo.style.left=(-600*index)+'px';
        }
    }
    function change(index){
        for(var i=0;i<s_li.length;i++){
                s_li[i].style.backgroundColor='#fff';
            }
            s_li[index].style.backgroundColor='red';
    }
</script>